
import React, { useState } from 'react'
const App = function () {
    // 修改一个数组 默认数组被遍历出来
    const [list, setList] = useState([1, 2, 3])
    //useState => [value,setValue]
    const [count, setCount] = useState(100)
    const [name, setName] = useState("张")
    const setState = () => {
        setCount(count * 2)
    }
    // 给list里的值自增一
    const add = (index) => {
        //赋值
        //不允许直接修改数据
        //用旧值替换新值
        const _list = [...list]
        console.log(_list)
        _list[index] = _list[index] + 1
        console.log(_list)
        setList(_list)

    }
    return <div>
        我是一个hook组件
        {name}有{count}工钱
        <button onClick={setState}>涨工资</button>
        {/* 可以不用使用setState直接修改 */}
        <button onClick={() => setName("老李")}>老张改老李</button>
        <div>
            {list.map((value, index) => {
                return <button key={index} onClick={() => add(index)}>
                    {value}
                </button>
            })}
        </div>
    </div>
}

export default App